<template>
	<view class="shop" style="padding-top: 20px;">
		<div v-for="item in parkArr" :key="item.id">
			<div class="shopinfo">
				<div>所在位置：{{ item.note + '---' + adress }}</div>
				<div>车位编号：{{ item.id }}</div>
				<div>车位状态：{{ parkingStatus(item.status) }}</div>
				<div>价格：{{ item.price }}￥</div>
				<div>备注：{{ item.note }}</div>
				<div class="buy"><span @click="buyPark(item)">购买</span></div>
			</div>
		</div>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				parkArr: [{
						id: 13,
						location: 7,
						note: "开花路",
						number: 130,
						price: 128888,
						status: -1
					},
					{
						id: 16,
						location: 7,
						note: "淮海路",
						number: 123,
						price: 15000,
						status: 1
					},
					{
						id: 15,
						location: 7,
						note: "南京路",
						number: 125,
						price: 18000,
						status: 0
					}
				],
				adress: "幸福小区",
			}
		},
		onLoad() {

		},
		methods: {
			parkingStatus(status) {
				if (status == 1) {
					return "车位在售";
				} else if (status == -1) {
					return "车位已售出";
				} else if (status == 0) {
					return "车位已预定";
				} else {
					return "未知";
				}
			},
			buyPark(val) {
				if (val.status == -1 || val.status == 0) {
					uni.showToast({
					    title: '车位已被订购或预定！',
						icon:'none',
					    durati1on: 2000
					});
				} else {
					uni.showModal({
					    title: '提示',
					    content: '确认要购买并支付预定金吗',
					    success: function (res) {
					        if (res.confirm) {
					            uni.showToast({
					                title: '已支付预定金！',
					            	icon:'none',
					                durati1on: 1000
					            });
					        } else if (res.cancel) {
					            uni.showToast({
					                title: '用户取消预定！',
					            	icon:'none',
					                durati1on: 1000
					            });
					        }
					    }
					});
				}
			},
		}
	}
</script>

<style lang="scss" scope>
	.shop {
		padding: 0 50rpx;
		.shopinfo {
			font-size: 14px;
			font-weight: 700;
			border: 2px solid #bbb;
			padding: 5px 20px;
			border-radius: 20px;
			margin-bottom: 10px;
			box-shadow: 3px 3px 9px #999;

			div {
				margin: 10px 0;
			}

			.buy {
				color: brown;
				border-top: 1px dashed #000;
				text-align: right;
				font-size: 16px;
				margin: 0;
				line-height: 30px;

				span {
					cursor: pointer;
				}
			}
		}
	}
</style>
